<!--
 * @Author: licongwei
 * @Date: 2022-03-17 10:17:57
 * @FileDescription: 各市门店数量情况
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <charts :params="params"></charts>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface IDataItem {
  name: string
  value: number
}
interface IChartState {
  title: string
  params: any
  colorList: any
  getData: (shopId: string) => void
}

export default defineComponent({
  name: 'yjjczxqk',
  components: {
    comBox
  },
  props: {
    shopId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    // 柱图
    const chartState: IChartState = reactive({
      title: '',
      colorList: ['#eb6100', '#08eef1', '#f8b551'],
      params: {
        custom: true,
        loading: true,
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          legend: {
            show: false
          },
          grid: {
            left: '110px',
            right: '5%',
            top: '5%',
            bottom: '5%'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              snap: true
            },
            confine: true,
            backgroundColor: '#1959a7',
            borderColor: '#4beeff',
            borderWidth: 1,
            padding: 12,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            formatter: (params: any) => {
              const { data, marker } = params[0]
              return `<div style="font-weight: bold;">${data.name}
                <div style="display: flex;align-items: center;justify-content: space-between;font-weight: bold;"><span>${marker}<span style="margin-left:5px">数量</span></span><span style="margin-left:15px;">${data.value}</span></div>
                </div>`
            }
          },
          xAxis: [
            {
              type: 'value',
              show: false
            }
          ],
          yAxis: [
            {
              type: 'category',
              inverse: true, // 反转 Y 轴数据
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                fontSize: '15px',
                color: '#9ccfff',
                position: 'left',
                nameLocation: 'start',
                formatter: (value: any) => {
                  return value.length > 8 ? value.slice(0, 8) + '...' : value
                }
              }
            }
          ],
          series: [
            {
              type: 'bar',
              itemStyle: {
                borderRadius: [8, 8, 8, 8],
                color: (params: any) => {
                  let color = ''
                  if (params.dataIndex < 3) {
                    color = chartState.colorList[params.dataIndex]
                  } else {
                    color = '#00a0e9'
                  }
                  return color
                }
              },
              barWidth: 15,
              zlevel: 1,
              data: []
            },
            {
              type: 'bar',
              backgroundStyle: {
                color: 'rgba(68,156,255,0.1)'
              },
              label: {
                show: true,
                position: ['103%', 0],
                align: 'left',
                color: '#00baff',
                fontFamily: 'AliHYAiHei',
                fontSize: '17px',
                formatter: (params: any) => {
                  return `{${params.dataIndex}|${params.data.sourceValue}}`
                },
                rich: {
                  0: {
                    color: '#eb6100',
                    fontSize: '17px'
                  },
                  1: {
                    color: '#08eef1',
                    fontSize: '17px'
                  },
                  2: {
                    color: '#f8b551',
                    fontSize: '17px'
                  }
                }
              },
              itemStyle: {
                borderRadius: [8, 8, 8, 8],
                color: 'rgba(68,156,255,0.1)'
                // color: '#f0f'
              },
              barWidth: 15,
              barGap: '-100%',
              data: []
            }
          ]
        }
      },
      getData: (shopId) => {
        chartState.params.loading = true
        httpRequest
          .get({ url: 'M3P1Gsmdslqk', params: { shopId: shopId } })
          .then((res) => {
            chartState.title = res.title
            const dataSort = res.data.sort((a: any, b: any) => {
              return b.value - a.value
            })
            chartState.params.options.dataset.source = dataSort
            const maxValue = dataSort[0].value
            chartState.params.options.series[0].data = dataSort
            chartState.params.options.series[1].data = dataSort.map(
              (item: any) => ({
                ...item,
                sourceValue: item.value,
                value: maxValue
              })
            )
            chartState.params.options.yAxis[0].data = dataSort.map(
              (item: any) => item.name
            )
            const echartWidth =
              String(dataSort[dataSort.length - 1].value).length * 9
            chartState.params.options.grid.right = 30 + echartWidth
            chartState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    watch(
      () => props.shopId,
      (val) => {
        chartState.getData(val)
      }
    )
    return {
      ...toRefs(chartState)
    }
  }
})
</script>
<style lang="less" scoped></style>
